@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h5 {
    @apply absolute px-6 duration-200 w-52 bottom-4 md:bottom-8 md:px-10 group-hover:scale-110 group-hover:text-black;
  }
}

@layer components {
  #hero {
    @apply bg-no-repeat bg-cover bg-center;
    @apply bg-[url('/images/mobile/image-hero.jpg')];
  }
  @media screen(md) {
    #hero {
      @apply bg-left-top;
      @apply bg-[url('/images/desktop/image-hero.jpg')];
    }
  }
  .btn {
    @apply px-10 py-2 my-0 font-bold tracking-widest uppercase border-2 border-black font-alata hover:bg-black hover:text-white;
  }
  .item-container {
    @apply flex flex-col justify-between w-full space-y-6 text-2xl text-white uppercase md:flex-row md:space-y-0 md:space-x-8;
  }
  .item {
    @apply relative overflow-hidden md:w-1/4;
  }
  .item-gradient {
    @apply absolute inset-0 bg-gradient-to-b from-transparent to-gray-900 group-hover:from-gray-50 group-hover:to-white group-hover:opacity-70;
  }
  .hamburger {
    @apply cursor-pointer w-6 h-6 transition-all duration-[0.25s] relative;
  }
  .hamburger-top,
  .hamburger-middle,
  .hamburger-bottom {
    @apply absolute w-6 h-[2px] top-0 left-0 bg-[#fff] rotate-0 transition-all duration-[0.5s];
  }
  .hamburger-middle {
    @apply translate-y-[7px];
  }
  .hamburger-bottom {
    @apply translate-y-[14px];
  }
  .open {
    @apply rotate-90;
  }
  .open .hamburger-top {
    @apply rotate-45 translate-y-[6px] /*translate-x-[6px]*/;
  }
  .open .hamburger-middle {
    @apply hidden;
  }
  .open .hamburger-bottom {
    @apply -rotate-45 translate-y-[6px] /*translate-x-[6px]*/;
  }
}
